<template>
  <div>
    <el-select v-model="value" placeholder="请选择" @change="handleSelectChange">
      <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
      </el-option>
    </el-select>
    <!-- 添加一个外部div作为容器，并应用Flex布局 -->
    <div class="chart-container">
      <div ref="charts" :style="{ width: '50%', height: '800px' }"></div>
      <div ref="pieChart" :style="{ width: '50%', height: '500px' }"></div>
    </div>
    <div class="card">
      <div class="indent">
        可以看到比亚迪品牌的销量一骑绝尘，销量排行榜前五常年有3-4个车型都是比亚迪的，而电车中的标杆MODELY
        也是常年居于前五名。老牌电车王者特斯拉、五菱汽车、
        广汽埃安紧随比亚迪后面，造车新势力如理想、蔚来、
        小鹏的销量也是越来越高，占据的市场销量份额越来越大。
        一些老牌汽车如丰田、本田、宝马占据的市场份额很小，
        一是说明品牌战略方向出了问题，二是说明定价过高不符合市场调性。
      </div>
    </div>
  </div>

</template>

<script>
import * as echarts from 'echarts';
import axios from 'axios';
export default {
  name: 'TaskOne',
  data() {
    return {
      options: [{
        value: 1,
        label: '近1个月'
      }, {
        value: 3,
        label: '近3个月'
      }, {
        value: 6,
        label: '近6个月'
      }, {
        value: 12,
        label: '近12个月'
      }, {
        value: 24,
        label: '近24个月'
      }],
      value: 24,
      option: {

        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          data: ['热门车型排行榜数据'],
          textStyle: { // 这里设置图例文字样式
            fontSize: 20 // 设置图例中文字的字体大小
          }
        },
        // 将原来的xAxis配置改为yAxis，并做适当调整
        yAxis: {
          type: 'category',
          data: ['排名1', '排名2', '排名3', '排名4', '排名5'],
          name: '排名',
          nameLocation: 'end',
          nameGap: 30,
          axisLabel: {
            show: true,
            align: 'right',
            rotate: 0,
            margin: 10,
            fontSize: 10
          },
          inverse: true
        },
        // 将原来的yAxis配置改为xAxis，并改为数值轴
        xAxis: {
          type: 'value',
          name: '数值',
          splitLine: {
            show: false
          }
        },
        series: [
          {
            name: '热门车型排行榜数据',
            // 改为水平柱状图
            type: 'bar',
            // 水平布局时，宽度应基于y轴，这里设置为自适应，也可以指定固定高度
            barCategoryGap: '100%',
            // 或者使用barWidth来设置固定高度，根据需求选择
            barWidth: '10px',
            data: [100, 80, 60, 40, 20],
            itemStyle: {
              color: 'blue',
              label: {
                // 由于图变为横向，位置也应调整为左侧或右侧
                position: 'left',
              }
            },
            animationDurationUpdate: 1000
          }
        ]
      },
      pieOption: {
        // 添加标题配置
        title: {
          text: '品牌市场占比', // 标题文本
          left: 'center', // 标题水平居中
          textStyle: {
            fontSize: 16, // 标题文字大小
            fontWeight: 'bold' // 文字加粗
          }
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '5%',
          left: 'center'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 40,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 1048, name: 'Search Engine' },
              { value: 735, name: 'Direct' },
              { value: 580, name: 'Email' },
              { value: 484, name: 'Union Ads' },
              { value: 300, name: 'Video Ads' }
            ]
          }
        ]
      }
    };
  },
  mounted() {
    this.GetData(),
      this.GetBrand()
    this.handleSelectChange
  },
  methods: {
    GetData() {
      console.log(this.value)
      let getoptions = {
        method: 'GET',
        url: '/api/task2/carSaleCounts',
        params: {
          month: this.value
        }
      }
      axios.request(getoptions).then((res) => {
        console.log(res)
        this.option.yAxis.data = res.data.data.carName
        this.option.series[0].data = res.data.data.saleCounts
        console.log(res.data.data)
        //console.log(res.data.data.saleCounts)
        //
        this.chartInstance = echarts.init(this.$refs.charts); // 使用 this.$refs.charts 获取 DOM 元素  
        this.chartInstance.setOption(this.option);
      }).catch(function (error) {
        console.error(error);
      })
    },
    GetBrand() {
      // 假设这是获取饼图数据的方法
      let getBrandOptions = {
        method: 'GET',
        url: '/api/task2/brandSaleCounts', // 假定的API地址
        params: {
          month: this.value // 假设这是从表单或其他地方获取的月份
        }
      };
      axios.request(getBrandOptions).then((res) => {
        console.log('brand' + res);
        // 更新饼图数据
        const brandNames = res.data.data.brandName; // 品牌名称数组
        const saleCounts = res.data.data.saleCounts; // 销售数量数组
        // 合并两个数组为饼图所需的数据格式
        const pieChartData = brandNames.map((name, index) => ({
          value: saleCounts[index],
          name: name
        }));
        console.log(pieChartData);
        // 更新饼图数据
        this.pieOption.series[0].data = pieChartData;
        // 初始化饼图
        this.pieChartInstance = echarts.init(this.$refs.pieChart);
        this.pieChartInstance.setOption(this.pieOption);
      }).catch((error) => {
        console.error(error);
      });
    },
    handleSelectChange() {
      this.GetData();
      this.GetBrand();
    },
  }
};
</script>


<style>
.chart-container {
  display: flex;
  /* 应用Flex布局 */
  justify-content: space-between;
  /* 子元素左右对齐，两边贴边 */
}



.card {
  background-color: rgb(221, 218, 218);
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  padding: 20px;
  margin: 10px;
  flex-grow: 1;
  max-width: 25%;
  /* 让卡片自动填充容器宽度 */
  /* 如果需要限制卡片最大宽度以防止过度拉伸，可以添加如下属性：
  max-width: 25%; // 或者根据实际需要设定其他百分比
  */
  display: flex;
  flex-direction: column;
  /* 保证卡片内部元素垂直排列 */
}
</style>